<!--
 * @Author: hq
 * @Date: 2022-05-21 12:01:18
 * @LastEditors: hq
 * @LastEditTime: 2022-06-10 15:17:16
 * @Description: 头部
 * @version: 1.0
-->
<template>
  <div class="menu">
    <div
      class="list"
      :class="[active === index ? 'active' : '']"
      @click="handleClick(index)"
      v-for="(item, index) in menu"
      :key="index"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<script>
import { getMenuData } from "@/api/index";
import { mapState } from "vuex";
export default {
  data() {
    return {
      active: 0,
      menu: [],
      menu1: [
        {
          id: "1",
          title: "首页",
          childs: [
            {
              id: "1-1",
              path: "/welcome",
              title: "首页",
              icon: "el-icon-user",
            },
          ],
        },
        {
          id: 6,
          title: "商城管理",
          childs: [
            {
              id: "6-1",
              title: "商品列表",
              icon: "el-icon-user",
              childs: [
                { path: "/shopSystem/allShop/shop_list", title: "商品列表" },
                {
                  path: "/shopSystem/allShop/shop_classification",
                  title: "商品分类",
                },
                {
                  path: "/shopSystem/allShop/shop_comment",
                  title: "商品评论",
                },
              ],
            },
            {
              id: "6-5",
              title: "订单管理",
              icon: "el-icon-user",
              childs: [
                {
                  path: "/shopSystem/order/online_order",
                  title: "电商订单",
                },
                {
                  path: "/shopSystem/order/offline_order",
                  title: "扫一扫订单",
                },
                {
                  path: "/shopSystem/order/score_order",
                  title: "积分订单",
                },
              ],
            },
          ],
        },
        {
          id: 7,
          title: "商户",
          childs: [
            {
              id: "7-1",
              title: "店铺管理",
              icon: "el-icon-user",

              childs: [
                {
                  id: "7-1-1",
                  title: "店铺列表",
                  icon: "el-icon-user",
                  path: "/merchant/shop_list",
                },
              ],
            },
            {
              id: "7-2",
              title: "商家入驻",
              icon: "el-icon-user",

              childs: [
                {
                  id: "7-2-1",
                  title: "入驻申请",
                  icon: "el-icon-user",
                  path: "/merchant/setting_in",
                },
                {
                  id: "7-2-2",
                  title: "待审核",
                  icon: "el-icon-user",
                  path: "/merchant/judge",
                },
              ],
            },
            {
              id: "7-3",
              title: "物料管理",
              icon: "el-icon-user",
              childs: [
                {
                  id: "7-2-1",
                  title: "物料列表",
                  icon: "el-icon-user",
                  path: "/merchant/material_list",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    async getMenuData() {
      const { data } = await getMenuData();
      if (data.code === 1) {
        // (",,,,,");
      }
    },
    handleClick(index) {
      this.active = index;
      this.$store.commit("saveMenu", index);
      //   sessionStorage.setItem("menuActive", this.active);
      //   (this.active);
    },
  },
  computed: {
    ...mapState(["menuIndex"]),
  },
  created() {
    this.menu = this.menu1;
    sessionStorage.setItem("menu", JSON.stringify(this.menu));
    // this.getMenuData();
    // let activeValue = sessionStorage.getItem("menuActive");
    // (activeValue);
    // if (activeValue) {
    //   this.handleClick(Number(activeValue));
    // }
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/index.scss";
.menu {
  display: flex;
  height: 100%;
  align-items: center;
  font-size: 14px;
  .list {
    padding: 0 20px;
    box-sizing: border-box;
    -moz-user-select: none; /*mozilar*/
    -webkit-user-select: none; /*webkit*/
    -ms-user-select: none; /*IE*/
    user-select: none;
    &:hover {
      color: $color-primary1;
      cursor: pointer;
    }
  }
  .active {
    color: $color-primary1;
  }
}
</style>
